<template>
    <div>
      <el-row>
      <el-col :span="24">
        <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>设备管理</el-breadcrumb-item>
        <el-breadcrumb-item>设备分类</el-breadcrumb-item>
      </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-button type="success" plain @click="addFirstCategory('addFirstForm')" size="medium">添加设备一级分类</el-button>
      </el-col>
    </el-row>
     <tree-grid
    :treeStructure="true"
    :columns="columns"
    :data-source="dataSource"
    :usersShow="false"
    :menushide="false"
    :menustargethide="false"
    :defaultExpandAll="false"
    @addOrg="addCurrentCategory"
    @editOrg="editCurrentCategory"
    >
    </tree-grid>
    <!-- 添加一级分类 -->
    <el-dialog title="添加设备一级分类" :visible.sync="addFirstDialog" width="20%">
      <el-form :model="addFirstForm" label-width="130px"  ref="addFirstForm" size="medium">
        <el-form-item label="设备分类编号" prop="menuIcon">
          <el-input v-model="addFirstForm.CategoryNo" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="设备分类名称" prop="menuUrl">
          <el-input v-model="addFirstForm.CategoryName" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addFirstDialog = false" size="medium">取 消</el-button>
        <el-button type="primary" @click="addFirstCategorySubmit('addFirstForm')" size="medium">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 添加子节点 -->
    <el-dialog title="添加子分类" :visible.sync="addDialogFormVisible" width="20%">
      <el-form :model="addCategoryForm" label-width="130px"  ref="addCategoryForm" size="medium">
        <el-form-item label="上级设备分类编号" prop="pmenuName">
          <el-input v-model="addCategoryForm.pid" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="上级分类名称" prop="menuName">
          <el-input v-model="addCategoryForm.pName" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="设备分类编号" prop="menuIcon">
          <el-input v-model="addCategoryForm.CategoryNo" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="设备分类名称" prop="menuUrl">
          <el-input v-model="addCategoryForm.CategoryName" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialogFormVisible = false" size="medium">取 消</el-button>
        <el-button type="primary" @click="addCategorySubmit('addCategoryForm')" size="medium">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改当前节点 -->
    <el-dialog title="修改当前分类" :visible.sync="editDialogFormVisible" width="20%">
      <el-form :model="editCategoryForm" label-width="130px"  ref="editCategoryForm" size="medium">
        <el-form-item label="设备分类编号" prop="menuIcon">
          <el-input v-model="editCategoryForm.CategoryNo" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="设备分类名称" prop="menuUrl">
          <el-input v-model="editCategoryForm.CategoryName" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFormVisible = false" size="medium">取 消</el-button>
        <el-button type="primary" @click="editCategorySubmit('editCategoryForm')" size="medium">确 定</el-button>
      </div>
    </el-dialog>
    </div>
</template>
<script>
import TreeGrid from '@/components/TreeGrid/TreeGrid'
import { reqequcategory } from '@/api'
export default {
  data () {
    return {
      dataSource: [],
      columns: [{
        text: '设备分类编码',
        dataIndex: 'CategoryNo',
        width: '300'
      }, {
        text: '设备分类名称',
        dataIndex: 'CategoryName',
        width: '600'
      }],
      addFirstDialog: false,
      addFirstForm: {
        CategoryNo: '',
        CategoryName: ''
      },
      addDialogFormVisible: false,
      addCategoryForm: {
        pid: '',
        pName: '',
        CategoryNo: '',
        CategoryName: ''
      },
      editDialogFormVisible: false,
      editCategoryForm: {
        CategoryNo: '',
        CategoryName: ''
      }
    }
  },
  components: {
    TreeGrid
  },
  created () {
    this.initList()
  },
  methods: {
    // 初始化菜单列表
    initList () {
      reqequcategory().then(res => {
        if (res.code === 200) {
          this.dataSource = res.data
        }
      })
    },
    // 添加设备一级分类弹出
    addFirstCategory (formName) {
      this.resetForm(formName)
      this.addFirstDialog = true
    },
    // 添加子节点弹出
    addCurrentCategory (row) {
      this.resetForm('addCategoryForm')
      this.addDialogFormVisible = true
      console.log(row)
      this.addCategoryForm.pName = row.CategoryName
      this.addCategoryForm.pid = row.CategoryNo
    },
    // 修改当前分类
    editCurrentCategory (row) {
      this.resetForm('editMenuForm')
      this.editDialogFormVisible = true
      this.editCategoryForm.CategoryName = row.CategoryName
      this.editCategoryForm.CategoryNo = row.CategoryNo
    },
    resetForm (formName) {
      if (this.$refs[formName] !== undefined) {
        this.$refs[formName].resetFields()
      }
    }
  }
}
</script>
<style lang="sass" scoped>
</style>
